<template>
    <div class="add-warrper">
        <el-card class="box-card">
            <el-form :inline="true" :model="data.departmentInfo" class="demo-form-inline">
                <el-form-item label="科室名称">
                    <el-input v-model="data.departmentInfo.name" placeholder="请输入科室名称" />
                </el-form-item><br>
                <el-form-item label="科室主任">
                    <el-select v-model="data.departmentInfo.maindoctor" placeholder="请选择科室主任">
                        <el-option v-for="item in data.doctorList" :key="item.id" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item><br>
                <el-form-item label="科室编号">
                    <el-input value="系统自动生成" placeholder="请输入科室名称" disabled/>
                </el-form-item><br>
                <el-form-item label="创建时间">
                    <el-input value="系统自动生成" placeholder="请输入科室名称" disabled/>
                </el-form-item><br>
                <el-form-item>
                    <el-button type="primary" @click="addDepartment">确认创建</el-button>
                    <el-button type="info" @click="">返回上一级</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, watchEffect   } from 'vue';
import { addDepartmentReq, doctorDoctornamesReq } from '@/api/department/department'
import { ElMessage } from 'element-plus'

const data = reactive({
    departmentInfo:{
        name:'',
        maindoctor:''
    },
    doctorList:[]
})

const addDepartment = async () => {
    const res = await addDepartmentReq({name:data.departmentInfo.name,maindoctor:data.departmentInfo.maindoctor})
    if(res.data.code === 1 ){
        ElMessage.success('添加成功')
    }else{
        ElMessage.error('添加失败')
    }
}

const getDoctorList = async () => {
    const res = await doctorDoctornamesReq()
    data.doctorList = res.data.data
}

watchEffect(getDoctorList)

</script>

<style scoped>
    
</style>